<template>
  <div :id="demo_class" :style="{height:style_height.height,width:style_height.width}" class="echarts_pie"></div>
</template>

<script>
import {get_status_distribution} from "@/api/cockpit/data"
import {message} from "ant-design-vue";
import {inject, onMounted,reactive} from "vue"
import {getStyleByEl} from "@/utils/dom/get_dom_style";

export default {
  name: "echart_pie",
  props: {
    demo_class: ""
  },
  setup(props, context) {
    const style_height = reactive({
      height: "",
      width: ""
    })
    let echarts = inject("echarts");//引入
    const init = async () => {
      const res = await get_data_list()
      let myChart = echarts.init(document.getElementById(props.demo_class));
      myChart.setOption(pie_option(res.data))
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

    const pie_option = (data) => {
      const params = {
        workNum: data.workNum,
        colseNum: data.colseNum,
        exNum: data.exNum,
        waitNum: data.waitNum
      }
      return {
        title: {
          // text: '设备状态分布统计',
          subtext: '',
          left: 'center',
          textStyle: {
            // width:200
            color: '#3A7BD5',
          },
        },
        tooltip: {
          trigger: 'item'
        },
        //右侧统计图表
        legend: {
          show: false,
          orient: 'vertical',
          left: 'left',
        },
        color: ['green', 'red', 'orange', 'yellow'],
        series: [
          {
            name: '设备工作状态',
            type: 'pie',
            radius: '50%',
            data: [
              {value: params.workNum, name: '工作：' + params.workNum},
              {value: params.colseNum, name: '关机：' + params.colseNum},
              {value: params.exNum, name: '异常：' + params.exNum},
              {value: params.waitNum, name: '待机：' + params.waitNum},
              // {value: 300, name: '视频广告'+1048}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 1)'
              }
            }
          }
        ]
      };
    }

    const get_data_list = async () => {
      const {height, width} = get_style_dom(props.demo_class)
      style_height.height = height;
      style_height.width = width;
      const res = await get_status_distribution()
      console.log(res)
      if (res.code === 1) {
        return res
      }
      message.warning("数据异常,请联系开发人员")
      return {
        data: null
      };
    }

    const get_style_dom = (dom) => {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }
    onMounted(() => {
      // init()
    })
    return {
      init,
      style_height
    }
  },
  // methods: {
  //   async init() {
  //     const res = await this.get_data_list()
  //     let myChart = this.$echarts.init(document.getElementById("main1"));
  //     myChart.setOption(this.pie_option(res.data))
  //     window.addEventListener("resize", function () {
  //       myChart.resize();
  //     });
  //   },
  //   pie_option(data) {
  //     const params = {
  //       workNum: data.workNum,
  //       colseNum: data.colseNum,
  //       exNum: data.exNum,
  //       waitNum: data.waitNum
  //     }
  //     return {
  //       title: {
  //         text: '设备状态分布统计',
  //         subtext: '',
  //         left: 'center',
  //         textStyle: {
  //           // width:200
  //           color: '#3A7BD5',
  //         },
  //       },
  //       tooltip: {
  //         trigger: 'item'
  //       },
  //       //右侧统计图表
  //       legend: {
  //         show: false,
  //         orient: 'vertical',
  //         left: 'left',
  //       },
  //       color: ['green', 'red', 'orange', 'yellow'],
  //       series: [
  //         {
  //           name: '设备工作状态',
  //           type: 'pie',
  //           radius: '50%',
  //           data: [
  //             {value: params.workNum, name: '工作：' + params.workNum},
  //             {value: params.colseNum, name: '关机：' + params.colseNum},
  //             {value: params.exNum, name: '异常：' + params.exNum},
  //             {value: params.waitNum, name: '待机：' + params.waitNum},
  //             // {value: 300, name: '视频广告'+1048}
  //           ],
  //           emphasis: {
  //             itemStyle: {
  //               shadowBlur: 10,
  //               shadowOffsetX: 0,
  //               shadowColor: 'rgba(0, 0, 0, 1)'
  //             }
  //           }
  //         }
  //       ]
  //     };
  //   },
  //   //  获取数据
  //   async get_data_list() {
  //     const res = await get_status_distribution()
  //     console.log(res)
  //     if (res.code === 1) {
  //       return res
  //     }
  //     message.warning("数据异常,请联系开发人员")
  //     return {
  //       data: null
  //     };
  //   }
  // },
  // mounted() {
  //   // this.init()
  // }
}
</script>

<style scoped>

</style>
